<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Form Params</title>
        <style type='text/css'>
            body {font-family: verdana}
        </style>
	</head>
	<body>
<p>Change the inputs to change the object</p>
<pre>Result = <span id='result'></span></pre>
<div id="demo-html">
<form id='fp' action=''>
  <label>
    People Count<br/><input name='talk[peopleCount]'/>
  </label>
  <br/><br/>
  
  <label>
    Audience Rating<br/>
    <select name='talk[audienceRating]'>
      <option value='3'>3</option>
      <option value='2'>2</option>
      <option value='1'>1</option>
    </select>
  </label>
  <br/><br/>
  
  Time Left<br/>
  <label><input type='radio' name='talk[timeLeft]' value='1'/> 1 min</label><br/>
  <label><input type='radio' name='talk[timeLeft]' value='5'/> 5 min</label><br/>
  <label><input type='radio' name='talk[timeLeft]' value='10'/> 10 min</label><br/>
</form>
</div>
<script type='text/javascript' src='../../node_modules/steal/steal.js' main='@empty'>  
</script>
<script type='text/javascript' id="demo-source">
steal('jquerypp/dom/form_params',function(){
// updates the JSON text
var update = function(){
  
  // get form data 
  var json = $('#fp').formParams(),
  
      // convert it to JSON
      jsonString = JSON.stringify( json );
  
  // show JSON
  $('#result').text( jsonString );
};

// listen for changes and update
$('#fp').change(update);
$('input[name="talk[peopleCount]"]').keyup(update);

// show json right away
update(); 
});
</script>
	</body>
</html>